<style lang="stylus" scoped>
@import '../common/stylus/index.styl'
  .seller
    position absolute
    bottom 0
    top 174px
    overflow hidden
    width 100%
    overflow-y auto
    .introduce
      margin 0 18px
      .top
        display flex
        padding 18px 0
        border-bottom 1px solid rgba(7,17,27,0.1)
      .left
        flex 1
        .name
          font-size 14px
          color rgb(7,17,27)
          line-height 14px
          margin-bottom 8px
        .score
          display flex
          span
            font-size 10px
            color rgb(77,85,93)
            line-height 18px
            margin-left 8px
            &:last-of-type
              margin-left 12px
      .right
        text-align center
        .iconfont
          display inline-block
          font-size 24px
          line-height 24px
          margin-bottom 4px
          color rgba(7,17,27,0.4)
          &.active
            color rgb(240,20,20)
        p 
          font-size 10px
          color rgb(77,85,93)
          line-height 10px
      .botton
        display flex
        .item
          flex 1
          margin 18px 0
          text-align center
          border-right 1px solid rgba(7,17,27,0.1)
          &:last-of-type
            border-right none
          .txt
            font-size 10px
            color rgb(147,153,159)
            line-height 10px
            margin-bottom 4px
          .info
            font-size 10px
            font-weight 200
            color rgb(7,17,27)
            line-height 24px
            span 
              font-size 24px
    .box
      height 16px
      width 100%
      background #f3f5f7
      border-top 1px solid rgba(7,17,27,0.1)
      border-bottom 1px solid rgba(7,17,27,0.1)
    .bulletin
      margin 18px 18px 0px 18px
      p
        padding 0 12px
        font-size 12px
        color rgb(240,20,20)
        font-weight 200
        line-height 24px
        margin-bottom 16px
      li
        display flex
        padding-left 12px
        align-items center
        height 48px
        border-top 1px solid rgba(7,17,27,0.1)
        .icon
          width 16px
          height 16px
          margin 0 6px 0 0;
          &.decrease
            bgImg('decrease_1')
          &.discount
            bgImg('discount_1')
          &.guarantee
            bgImg('guarantee_1')
          &.invoice
            bgImg('invoice_1')
          &.special
            bgImg('special_1')
        span
          &:last-of-type
            font-size 12px
            font-weight 200
            color rgb(7,17,27)
            line-height 16px
    h2
      font-size 16px
      color #000000
      line-height 16px
      margin-bottom 8px
      font-weight 400
    .location
      padding 18px
      ul
        display flex
        overflow-x auto
        overflow-y hidden
      li
        flex 0 0 120px
        width 120px
        height 90px
        margin-right 6px
        img 
          width 100%
          height 100%
        &:last-of-type
          margin-right 0
    .information
      margin 18px
      li
        height 48px
        width 100%
        padding-left 12px
        border-top 1px solid rgba(7,17,27,0.1)
        font-size 12px
        font-weight 200
        color rgb(7,17,27)
        display table
        box-sizing border-box
        p
          line-height 16px
          display table-cell
          vertical-align: middle
</style>


<template>
  <div class="seller">
    <div class="introduce">
      <div class="top">
        <div class="left">
          <p class="name">{{seller.name}}</p>
          <div class="score">
            <Star class="star" :size='36' :score="seller.foodScore"></Star>
            <span>({{seller.ratingCount}})</span>
            <span>月售{{seller.sellCount}}单</span>
          </div>
        </div>
        <div class="right">
          <span class="iconfont icon-shoucang"></span>
          <p>未收藏</p>
        </div>
      </div>
      <div class="botton">
        <div class="item">
          <p class="txt">起送价</p>
          <p class="info"><span>{{seller.minPrice}}</span>元</p>
        </div>
        <div class="item">
          <p class="txt">商家配送</p>
          <p class="info"><span>{{seller.deliveryPrice}}</span>元</p>
        </div>
        <div class="item">
          <p class="txt">平均配送时间</p>
          <p class="info"><span>{{seller.deliveryTime}}</span>分钟</p>
        </div>
      </div>
    </div>
    <div class="box"></div>
    <div class="bulletin">
      <h2>公告与活动</h2>
      <p>{{seller.bulletin}}</p>
      <ul>
        <li :key="index" v-for="(support,index) in seller.supports">
          <span class="icon" :class="iconclass[support.type]"></span>
          <span>{{support.description}}</span>
        </li>
      </ul>
    </div>
    <div class="box"></div>
    <div class="location">
      <h2>商家实景</h2>
      <ul>
        <li :key="index" v-for="(pic,index) in seller.pics">
          <img :src="pic">
        </li>
      </ul>
    </div>
    <div class="box"></div>
    <div class="information">
      <h2>商家信息</h2>
      <ul>
        <li :key="index" v-for="(info,index) in seller.infos">
          <p>{{info}}</p>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import Star from '@/components/star.vue'
export default {
  data () {
    return {
      seller:{},
      iconclass:['decrease','discount','special','invoice','guarantee']
    }
  },
  components:{
    Star
  },
  created () {
    this.$http.get('/api/sellers').then((response) => {
      this.seller = response.data
      console.log(this.seller)
    })
  },
}
</script>
